<template>
  <div class="bigview" @click="suspend">
    <video :src="bgVideo" id="vide" class="bgVideo" loop></video>
    <div class="title">
      <img :src="activity.douwu_large_title" />
    </div>

    <div class="teamInfo team1">
      <div class="header">
        <img :src="activity.douwu_left_logo" alt="" />
        <p class="teamName">{{ activity.douwu_left_title }}</p>
      </div>
      <div class="qr1" id="qr1">
        <div style="display: none;" id="qrcode"></div>
        <img :src="qrcodeimg" alt="" />
      </div>
      <p class="tips">扫码参与</p>
      <div class="teamLine">
        <div class="score">{{ userData.jia_list.length }} / {{ team1 }}</div>
        <div class="lineBox">
          <div class="line" v-bind:style="{ height: team1Line }"></div>
        </div>
      </div>
    </div>
    <div class="teamInfo team2">
      <div class="header">
        <img :src="activity.douwu_right_logo" alt="" />
        <p class="teamName">{{ activity.douwu_right_title }}</p>
      </div>
      <div class="qr2" id="qr2">
        <img :src="qrcodeimg" alt="" />
      </div>
      <p class="tips">扫码参与</p>
      <div class="teamLine">
        <div class="score">{{ userData.yi_list.length }} / {{ team2 }}</div>
        <div class="lineBox">
          <div class="line" v-bind:style="{ height: team2Line }"></div>
        </div>
      </div>
    </div>

    <ul class="aniFilter">
      <li
        class="filterItem"
        v-for="(item, i) in filterArr"
        :key="i"
        :item="item"
        v-bind:class="[item.team]"
      >
        <img :src="item.avator" alt="" />
      </li>
    </ul>

    <div class="stopbg" v-show="activity.douwu_is_open == 0">
      <img :src="activity.douwu_notice" class="stopBox" />
    </div>
    <div class="openbg" v-show="activity.douwu_is_open == 1 && beforeOpen">
      <img src="../assets/openBg.png" class="openBox" />
      <img src="../assets/5.png" v-show="openimg == 5" class="openimg" />
      <img src="../assets/4.png" v-show="openimg == 4" class="openimg" />
      <img src="../assets/3.png" v-show="openimg == 3" class="openimg" />
      <img src="../assets/2.png" v-show="openimg == 2" class="openimg" />
      <img src="../assets/1.png" v-show="openimg == 1" class="openimg" />
    </div>
    <div class="openJpbg" v-show="openJp">
      <img :src="activity.douwu_count_down" class="openjpBox" />
      <img src="../assets/3.png" v-show="openjpimg == 3" class="openjpimg" />
      <img src="../assets/2.png" v-show="openjpimg == 2" class="openjpimg" />
      <img src="../assets/1.png" v-show="openjpimg == 1" class="openjpimg" />
    </div>
    <div class="teamWin" v-show="teamWin" @click="hideTeam">
      <div class="winBox" v-show="teamShow == 1">
        <div class="winTitle">
          <img src="../assets/big_win_team.png" />
        </div>
        <div class="teamIn">
          <div class="teamBox">
            <img
              :src="activity.douwu_left_logo"
              class="teamHead"
              v-bind:class="{ active: rank.result == 1 }"
              alt=""
            />
            <img
              class="winIcon winIconLeft"
              src="../assets/win.png"
              v-show="rank.result == 1"
            />
            <div class="teamTxt">
              总分：{{ rank.jia.score }}<br />参与：{{ rank.jia.num }}人
            </div>
          </div>
          <div class="teamBox teamBox2">
            <img
              :src="activity.douwu_right_logo"
              class="teamHead"
              v-bind:class="{ active: rank.result == 2 }"
              alt=""
            />
            <img
              class="winIcon winIconRight"
              src="../assets/win.png"
              v-show="rank.result == 2"
            />
            <div class="teamTxt">
              总分：{{ rank.yi.score }}<br />参与：{{ rank.yi.num }}人
            </div>
          </div>
        </div>
        <div class="teamName" v-show="rank.result == 1">
          恭喜<span>{{ activity.douwu_left_title }}</span
          >获胜！其中<span>{{ rank.team_list.length }}</span
          >位幸运队员获得团队大奖！
        </div>
        <div class="teamName" v-show="rank.result == 2">
          恭喜<span>{{ activity.douwu_right_title }}</span
          >获胜！其中<span>{{ rank.team_list.length }}</span
          >位幸运队员获得团队大奖！
        </div>
        <ul class="memberList">
          <li v-for="(item, i) in rank.team_list" :key="i" :item="item">
            <img :src="item.avator" class="avator" />
            <p class="prize">{{ item.prize }}</p>
            <img
              v-show="item.prize_id != 0"
              :src="item.prize_img"
              class="prize_img"
            />
          </li>
        </ul>
      </div>
      <div class="winBox winPer" v-show="teamShow == 2">
        <div class="winTitle">
          <img src="../assets/big_win_per.png" />
        </div>
        <ul class="perList">
          <li v-for="(item, i) in rank.person_list" :key="i" :item="item">
            <p class="num" v-bind:class="'num' + [i + 1]">{{ i + 1 }}</p>
            <img :src="item.avator" class="avator" />
            <p class="score">{{ item.score }}</p>
            <p class="prize">{{ item.prize }}</p>
            <img
              v-show="item.prize_id != 0"
              :src="item.prize_img"
              class="prize_img"
            />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'bigview',
  data() {
    return {
      qrcode: null,
      qrcodeimg: '',
      activity: {},
      openimg: 5,
      openJp: false,
      openjpimg: 3,
      beforeOpen: false,
      bgVideo: '',
      activityid: null,
      team1: 0,
      team1Line: '0%',
      team2: 0,
      team2Line: '0%',
      teamData: {},
      teamShow: 1,
      teamWin: false,
      userData: {
        jia_list: [],
        yi_list: [],
      },
      filterArr: [],
      oldUser: {
        jia_list: [],
        yi_list: [],
      },
      rank: {
        result: 0,
        jia: {
          score: 0,
          num: 0,
        },
        yi: {
          score: 0,
          num: 0,
        },
        team_list: [],
        person_list: [],
      },
      djsJpN: null,
      interval_time: 10,
      isOpenIng: 0,
    };
  },
  mounted() {
    this.qrcode = new QRCode(document.getElementById('qrcode'), {
      text:
        'https://m.hangzhouhaiyu.com/douwu/#/index?activityid=' +
        this.$route.query.activityid,
      width: 400,
      height: 400,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.L,
    });
    this.qrcodeimg = this.qrcode._el
      .querySelector('canvas')
      .toDataURL('image/png');
    this.init();
  },

  methods: {
    suspend() {
      var vide = document.getElementById('vide');
      if (vide.paused) {
        vide.play();
      }
    },
    init() {
      if (this.$route.query.activityid) {
        this.activityid = this.$route.query.activityid;
      }
      this.getActivityInfo();

      setInterval(() => {
        this.progressInfo();
      }, 1000);
    },
    getActivityInfo() {
      var that = this;
      that.$api.douwuinfo({ activity_id: this.activityid }).then(res => {
        if (res.code == 200) {
          this.activity = res.data;
          this.interval_time = Number(this.activity.interval_time);
          this.bgVideo = this.activity.douwu_video;
          document.title = this.activity.activity_name;
          if (that.activity.douwu_qrcode) {
            that.qrcodeimg = that.activity.douwu_qrcode;
          }
          if (that.activity.douwu_is_open == 1) {
            that.setTimes();
            that.setProgress();
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    progressInfo() {
      var that = this;
      that.$api.progressInfo({ activity_id: this.activityid }).then(res => {
        if (res.code == 200) {
          this.activity.douwu_is_open = res.data.douwu_is_open;
          this.activity.next_sequence_time = res.data.next_sequence_time;
          this.activity.system_time = res.data.system_time;
          this.activity.now_sequence = res.data.now_sequence;
          if (res.data.douwu_is_open == 1) {
            that.setTimes();
            that.setProgress();
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    setTimes() {
      var that = this;
      var endtime = new Date(that.activity.next_sequence_time); //结束时间
      var nowtime = new Date(that.activity.system_time); //当前时间
      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      // if (that.activity.douwu_is_open == 1) {
      console.log(
        lefttime,
        Number(that.interval_time),
        that.userData.jia_list.length,
        that.userData.yi_list.length
      );
      if (lefttime <= 5 && lefttime > 0) {
        that.isOpenIng = 0;
        that.teamWin = false;
        that.beforeOpen = true;
        that.openimg = lefttime;
      } else if (
        lefttime <= Number(that.interval_time) &&
        lefttime > 5 &&
        (that.userData.jia_list.length > 0 || that.userData.yi_list.length > 0)
      ) {
        that.isOpenIng++;
        if (that.isOpenIng == 1) {
          that.beforeOpen = false;
          that.getLottery();
        }
      } else {
        that.isOpenIng = 0;
        that.teamWin = false;
        that.beforeOpen = false;
        return false;
      }
      // }
    },
    // 实时同步进度
    setProgress() {
      var that = this;
      that.$api
        .progress({
          activity_id: that.activityid,
          sequence: that.activity.now_sequence,
        })
        .then(res => {
          if (res.code == 200) {
            that.userData = {
              jia_list: [],
              yi_list: [],
            };
            that.teamData = res.message;
            that.team1 = res.message.jia;
            that.team2 = res.message.yi;
            var allScore = Number(res.message.jia) + Number(res.message.yi);
            if (allScore > 0) {
              that.team1Line =
                ((res.message.jia / allScore) * 100).toFixed(2) + '%';
              that.team2Line =
                ((res.message.yi / allScore) * 100).toFixed(2) + '%';
            } else {
              that.team1Line = '0%';
              that.team2Line = '0%';
            }
            if (that.teamData.jia_list.length > 0) {
              that.userData.jia_list = that.teamData.jia_list;
            }
            if (that.teamData.yi_list.length > 0) {
              that.userData.yi_list = that.teamData.yi_list;
            }
            that.compare();
          } else {
            this.$toast(res.message);
          }
        });
    },
    compare() {
      var that = this,
        userData = that.userData,
        oldUser = that.oldUser;
      for (var key in userData) {
        if (
          userData[key].length > 0 &&
          userData[key].length != oldUser[key].length
        ) {
          that.filterArr = that.filtersArr(
            oldUser[key],
            userData[key],
            'member_id'
          );
          for (var i = 0; i < that.filterArr.length; i++) {
            that.filterArr[i].team = key;
          }
        }
        oldUser[key] = userData[key];
      }
    },
    filtersArr(array, array2, key) {
      var result = [];
      for (var i = 0; i < array2.length; i++) {
        var obj = array2[i];
        var num = obj[key];
        var flag = false;
        for (var j = 0; j < array.length; j++) {
          var aj = array[j];
          var n = aj[key];
          if (n == num) {
            flag = true;
            break;
          }
        }
        if (!flag) {
          result.push(obj);
        }
      }
      return result;
    },
    // 请求开奖
    getLottery() {
      var that = this;
      this.$api
        .lottery({
          activity_id: that.activityid,
          sequence: that.activity.now_sequence,
        })
        .then(res => {
          if (res.code == 200) {
            this.rank = res.data;
            that.openJp = true;
            that.openjpimg = 3;
            var djsJp = setInterval(() => {
              that.openjpimg--;
              if (that.openjpimg == 0) {
                clearInterval(djsJp);
                that.openJp = false;
                that.teamWin = true;
                if (res.data.result == 0) {
                  that.teamShow = 2;
                } else {
                  that.teamShow = 1;
                  that.djsJpN = setInterval(() => {
                    if (that.teamShow == 1) {
                      that.teamShow = 2;
                    } else {
                      that.teamShow = 1;
                    }
                  }, 3000);
                }
              }
            }, 1000);
            that.oldUser = {
              jia_list: [],
              yi_list: [],
            };
          } else {
            this.$toast(res.message);
            this.clearTeam();
          }
        });
    },
    clearTeam() {
      this.team1 = 0;
      this.team2 = 0;
      this.team1Line = '0%';
      this.team2Line = '0%';
      this.openJp = false;
      this.teamWin = false;
    },
    hideTeam() {
      clearInterval(this.djsJpN);
      this.clearTeam();
    },
  },
};
</script>
<style lang="scss">
.bigview {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .bgimg {
    width: 100%;
  }
  .bgVideo {
    width: 100%;
  }
  .title {
    width: 220px;
    height: 87px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 10px;
    img {
      width: 100%;
    }
  }
  .teamInfo {
    position: absolute;
    height: 100%;
    width: 48px;
    left: 20px;
    top: 0;
    .header {
      width: 44px;
      margin: 10px auto 0;
      img {
        width: 44px;
      }
      .teamName {
        text-align: center;
        font-size: 10px;
        color: #ffacff;
      }
    }
    .teamLine {
      width: 100%;
      height: 400px;
      margin: 8px auto 0;
      .score {
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
      }
      .lineBox {
        margin: 0 auto;
        width: 24px;
        height: 172px;
        background: url(../assets/big_left_bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .line {
          width: 100%;
          background: url(../assets/big_left.png) bottom no-repeat;
          background-size: 100% auto;
          position: absolute;
          bottom: 0;
          left: 0;
          transition: all 1s;
        }
      }
    }
    #qr1,
    #qr2 {
      background: url(../assets/big_code_bg1.png) no-repeat;
      background-size: 100%;
      text-align: center;
      width: 48px;
      height: 48px;
      line-height: 48px;
      margin: 0 auto;
      img {
        vertical-align: middle;
        width: 38px;
      }
    }
    #qr2 {
      left: auto;
      right: 0;
      background: url(../assets/big_code_bg2.png) no-repeat;
      background-size: 100%;
    }
    .tips {
      text-align: center;
      font-size: 8px;
      color: #ffacff;
      margin: 0 auto;
      width: 100%;
    }
    &.team2 {
      left: auto;
      right: 20px;
      .header {
        .teamName {
          color: #89fbff;
        }
      }
      .lineBox {
        background: url(../assets/big_right_bg.png) no-repeat;
        background-size: 100% 100%;
        .line {
          background: url(../assets/big_right.png) bottom no-repeat;
          background-size: 100% auto;
        }
      }
      .tips {
        color: #89fbff;
      }
    }
  }
  .vdr {
    border: none;
  }
  .aniFilter {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    li {
      width: 35px;
      height: 58px;
      background: url(../assets/star1.png) no-repeat;
      background-size: 100%;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -50px;
      animation: stars_left 2s linear forwards;
      &:nth-child(2) {
        animation: stars_left 2s linear 0.3s forwards;
      }
      &:nth-child(3) {
        animation: stars_left 2s linear 0.6s forwards;
      }
      &:nth-child(4) {
        animation: stars_left 2s linear 0.9s forwards;
      }
      &:nth-child(5) {
        animation: stars_left 2s linear 1.2s forwards;
      }
      &:nth-child(6) {
        animation: stars_left 2s linear 1.5s forwards;
      }
      &:nth-child(7) {
        animation: stars_left 2s linear 1.8s forwards;
      }
      &:nth-child(8) {
        margin-left: -48px;
      }
      &:nth-child(9) {
        margin-left: -46px;
        animation: stars_left 2s linear 0.6s forwards;
      }
      &:nth-child(10) {
        margin-left: -44px;
        animation: stars_left 2s linear 0.9s forwards;
      }
      opacity: 0;
      img {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 5px;
        top: 5px;
        border-radius: 50%;
      }
      &.yi_list {
        margin-left: 38px;
        background: url(../assets/star2.png) no-repeat;
        background-size: 100%;
        animation: stars_right 2s linear forwards;
        &:nth-child(2) {
          animation: stars_right 2s linear 0.3s forwards;
        }
        &:nth-child(3) {
          animation: stars_right 2s linear 0.6s forwards;
        }
        &:nth-child(4) {
          animation: stars_right 2s linear 0.9s forwards;
        }
        &:nth-child(5) {
          animation: stars_right 2s linear 1.2s forwards;
        }
        &:nth-child(6) {
          animation: stars_right 2s linear 1.5s forwards;
        }
        &:nth-child(7) {
          animation: stars_right 2s linear 1.8s forwards;
        }
        &:nth-child(8) {
          margin-left: 36px;
        }
        &:nth-child(9) {
          margin-left: 40px;
          animation: stars_right 2s linear 0.6s forwards;
        }
        &:nth-child(10) {
          margin-left: 42px;
          animation: stars_right 2s linear 0.9s forwards;
        }
        img {
          width: 15px;
          height: 15px;
          left: auto;
          right: 5px;
        }
      }
    }
  }
  @keyframes stars_left {
    0% {
      opacity: 0;
      transform: translate(0, 0);
    }
    30% {
      opacity: 1;
      transform: translate(-70px, -70px);
    }
    70% {
      opacity: 1;
      transform: scale(3) translate(-80px, -80px);
    }
    100% {
      opacity: 0;
      transform: scale(3) translate(-80px, -80px);
    }
  }
  @keyframes stars_right {
    0% {
      opacity: 0;
      transform: translate(0, 0);
    }
    30% {
      opacity: 1;
      transform: translate(70px, -70px);
    }
    70% {
      opacity: 1;
      transform: scale(3) translate(80px, -80px);
    }
    100% {
      opacity: 0;
      transform: scale(3) translate(80px, -80px);
    }
  }
  .stopbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    .stopBox {
      width: auto;
      height: 360px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .openbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    .openBox {
      width: auto;
      height: 360px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .openimg {
      width: 70px;
      height: 98px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -120px;
      margin-top: -45px;
    }
  }
  .openJpbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    .openjpBox {
      width: 220px;
      height: 246px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .openjpimg {
      width: 57px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -30px;
      margin-top: -45px;
    }
  }
  .teamWin {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    .winBox {
      width: 500px;
      height: 307px;
      background: url(../assets/big_win_bg.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .winTitle {
        width: 280px;
        height: 42px;
        margin: 24px auto 0;
        img {
          width: 280px;
        }
      }
      .teamIn {
        width: 272px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        margin: 20px auto 0;
        .teamBox {
          width: 110px;
          position: relative;
          height: 40px;
          .teamHead {
            height: 40px;
            width: 40px;
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0.7;
            &.active {
              opacity: 1;
            }
          }
          .winIcon {
            position: absolute;
            width: 32px;
            height: 23px;
            top: -10px;
            left: 90px;
            &Right {
              left: 20px;
            }
          }
          .teamTxt {
            font-size: 9px;
            line-height: 12px;
            color: #ec5cdd;
            text-align: left;
            position: absolute;
            bottom: 3px;
            left: 0;
          }
          &2 {
            .teamHead {
              left: 0;
              right: auto;
            }
            .teamTxt {
              color: #29c4fe;
              left: 50px;
            }
          }
        }
      }
      .teamName {
        text-align: center;
        font-size: 10px;
        color: #03b7fc;
        margin-top: 15px;
        span {
          color: #fff;
          font-size: 11px;
          font-weight: bold;
          margin: 0 3px;
        }
      }
      .memberList {
        width: 490px;
        height: auto;
        font-size: 0;
        text-align: center;
        margin: 10px auto 0;
        overflow-x: hidden;
        li {
          width: 150px;
          height: 42px;
          line-height: 42px;
          background: url(../assets/big_team_mem.png) no-repeat;
          background-size: 100% 100%;
          display: inline-block;
          margin: 8px 5px;
          position: relative;
          .avator {
            width: 22px;
            height: 22px;
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: 11px;
          }
          .prize {
            text-align: left;
            font-size: 6px;
            color: #fff;
            height: 100%;
            position: absolute;
            top: 0;
            left: 35px;
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .prize_img {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 11px;
            top: 10px;
            right: 10px;
          }
        }
      }
      .perList {
        width: 450px;
        height: 220px;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 0 auto;
        li {
          width: 210px;
          height: 42px;
          line-height: 42px;
          background: url(../assets/big_rank.png) no-repeat;
          background-size: 100% 100%;
          position: relative;
          margin-bottom: 2px;
          .num {
            font-size: 10px;
            color: #fff;
            width: 13px;
            height: 15px;
            position: absolute;
            text-align: center;
            left: 10px;
            &1 {
              font-size: 0;
              background: url(../assets/big_rank_1.png) no-repeat;
              background-size: 100% 100%;
              top: 14px;
            }
            &2 {
              font-size: 0;
              background: url(../assets/big_rank_2.png) no-repeat;
              background-size: 100% 100%;
              top: 14px;
            }
            &3 {
              font-size: 0;
              background: url(../assets/big_rank_3.png) no-repeat;
              background-size: 100% 100%;
              top: 14px;
            }
          }
          .avator {
            position: absolute;
            width: 22px;
            height: 22px;
            border: 1px solid #fff;
            border-radius: 11px;
            left: 32px;
            top: 10px;
          }
          .score {
            background: url(../assets/df.png) left center no-repeat;
            background-size: 7px;
            width: 30px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 62px;
            font-size: 8px;
            color: #fff;
            padding-left: 12px;
            text-align: left;
          }
          .prize {
            text-align: left;
            font-size: 6px;
            color: #fff;
            height: 100%;
            position: absolute;
            top: 0;
            left: 100px;
            width: 75px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .prize_img {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 11px;
            top: 10px;
            right: 10px;
          }
        }
      }
    }
  }
}
</style>
